Vue初学者需要掌握的知识点及案例 |
您所在的位置：网站首页 › vue 初学者项目 › Vue初学者需要掌握的知识点及案例 |
|
什么是Vue
前端框架的三大马车（按时间顺序）： angular 谷歌公司 m(数据) v(视图) c(控制器) 双向数据绑定react facebook 视图层的框架view 虚拟domvue 尤玉溪 双向数据绑定+虚拟dom 是一套用于构建用户界面的渐进式框架 入门难度最低 为什么要学习Vue高效 运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高开发效率高 采用了组件化开发 将开发者的精力从dom操作解放出来，转移到数据操作上 dom操作极其影响效率，是制约效率的关键，要减少dom 修改内存中的数据（变量）消耗的资源远远小于dom操作 虚拟dom 就是一个内存中的一个对象 该对象有一个特点和dom有相同的结构 爱上Vue一旦熟悉，就情不自禁的用Vue,会抛弃原来二阶段的写法（直接操作dom） Vue的实例化 ① /*1、下载引入 2、找到一个dom元素 这个dom元素要被vue控制 3、在js中实例化Vue*/ 1vue的实例化 {{name}} {{data}} {{name}} // 创建一个vue的实例 let vm =new Vue({ el:"#xixi", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理 data:{ // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染 name:'你好世界' } }) ② {{name}} {{data}} {{name}} // 创建一个vue的实例 let vm =new Vue({ el:"#xixi", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理 data:{ // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染 name:'你好世界' } }) let vm2= new Vue({ el:'#hehe', data:{ name:'韩梅梅' } }) // 在一个页面可以实例化多个vue实例 每一个实例绑定自己的元素 数据不通用 数据绑定 {{text}} {{arr}} {{obj}} {{num}} {{null?'真的':'假的'}} {{undef?'真的':'假的'}} {{boolean}} let vm = new Vue({ el:'#app', data:{ boolean:false, text:'这里是文本', arr:['呵呵','嘻嘻'], obj:{us:123,ps:456}, num:123, null:null, undef:undefined } }) // 将data中的数据在视图中使用（view） 这个过程叫数据绑定 方向 data->view // 正常的数据类型都可以绑定并显示 特殊的 null undefined 只能绑定不能显示 // {{}} 插值法内部 放的是变量和表达式 指令 directive指令后面跟的都是表达式或变量 内置指令 vue内部提供的直接使用自定义指令 实现自定义某些功能的指令条件渲染 都可以控制一个元素的显示或者隐藏 v-show 通过样式 display：none v-if 直接控制div元素有还是没有 （v-else v-elseif） v-if如果为真，则不渲染v-else 事件绑定 使用vue中的事件 v-on：事件名（和原生js的事件名一致）:事件处理函数 @事件名：事件处理函数 事件的处理函数写在实例的配置项 motheds 处理函数的默认参数是事件对象 如果需要传递其他参数 事件对象需要通过’$event 手动传递 属性绑定 v-bind 一般元素的属性都是跟固定的值 而属性绑定可以实现 属性的后方跟变量或者表达式 v-bind:要绑定的属性名 简写：“:要绑定的属性名” eg: 或者列表渲染 v-for 数组 表格 数字 字符串 都可以用v-for来进行循环 绑定一个标签 循环一个数据源 （循环数组） （循环对象） {{key}}:{{value}}双向数据绑定 v-model将input框的value和data里的数据进行绑定 任何一方发生改变另一方都会跟着改变 相当于 事件绑定和属性绑定的综合 可以绑定一个表单元素的value 修改表单元素的 data里的数据也会发生改变 v-model 所有的表单元素都可以用 组件也可以用 v-model 可以说就是给它绑定了一个事件，还绑定了一个值 使用vue做数据与页面之间处理时的思路： 寻找数据与页面的关系通过指令将数据与页面进行绑定更改数据 页面会自动变化 ① .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } {{name}} let vm = new Vue({ el:'#app', data:{ name:'韩梅梅', show:false } }) /* v-if 是一个指令 条件渲染 控制一个元素的渲染不渲染 指令后面跟是变量或者表达式 官方文档 文档查找 v-elseif 的用法 */ ② .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } let vm = new Vue({ el:'#app', data:{ show:false } }) /* v-show 可以控制元素的显示隐藏或者通过display none 不管显示还是隐藏元素都是存在 v-if 控制元素的渲染 v-if为假 该元素都不会创建 */ 事件绑定使用vue中的事件 v-on：事件名（和原生js的事件名一致）:事件的处理函数 @事件名:事件处理函数 事件的处理函数写在实例的配置项 motheds 处理函数的默认参数是事件对象 如果需要传递其他参数 事件对象需要通过 `$event 手动传递 .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } toggle toggle2 let vm = new Vue({ el:'#app', data:{ show:false }, methods: { //vue中写事件函数的地方 toggle:(num1,num2,e)=>{ console.log('点到我了',num1,num2,e) }, toggle2(){ console.log('点到第二个了') } }, }) /* 固定写法（规范）： v-on:事件名='事件处理函数' 事件名和原生js一样 onclick -> v-on:click onblur -> v-on:blur 事件处理函数一定要写在实例的 methods内部 默认参数（啥参数都不传都有的参数）是事件对象 如果有其他参数 事件对象需要通过 $event 手动传递 只要碰到$相关的，都是vue内置的 简写方式: v-on:click === @click */ 数据的响应式 .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } {{num}} add let vm = new Vue({ el:"#app", data:{ num:1 }, methods: { add(){ console.log(this)//指代当前vue的实例对象 this.num++ } }, }) /* 数据的响应式 数据变 页面自动变 不需要开发者操作dom vue特点之一：将开发者的精力从dom操作解放 转移到数据操作上 */ 数据的响应式demo .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } toggle let vm = new Vue({ el:"#app", data:{ show:true }, methods: { toggle(){ this.show=!this.show } } }) /*（动的仅仅只是数据，实现效果点按钮就能控制div显示隐藏） 用一个按钮控制div的显示隐藏 1.先让div显示隐藏 2.找到控制div显示隐藏的数据 3.用按钮去修改他 */ 属性绑定 v-bind v-bind 元素的属性都是跟的固定的值 属性绑定可以实现 属性的后方跟变量或者表达式 v-bind：要绑定的属性名 :要绑定的属性名 .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } let vm = new Vue({ el:"#app", data:{ url:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2164734927,1367682520&fm=26&gp=0.jpg' } }) /* 属性绑定 v-bind src width height class id .....都叫属性 属性后面跟的是固定字符串 作用：属性绑定可以让属性后面跟变量或者表达式 简写 v-bind:src === :src */ 属性绑定案例 .test{ width: 100px; height: 100px; background: lightgreen; } .test2{ width: 100px; height: 100px; background: skyblue; } toggle let vm = new Vue({ el:"#app", data:{ toggle:false }, methods: { change(){ this.toggle=!this.toggle } }, }) /* 通过一个按钮控制div颜色的改变 1.div 能改变颜色 2.找一个数据和改变颜色做关联 3.按钮控制这个数据的修改 */ 列表渲染v-for 属性绑定v-bind {item}} --> {item}}{{index}} --> {hehe}}{{xixi}} --> {key}}:{{value}}-{{index}} --> {item}} --> {{item}} let vm = new Vue({ el:"#app", data:{ lists:['午夜凶铃','咒怨','红色高跟鞋','真实魔鬼游戏','潜伏'], obj:{us:'王一',ps:'12345',sex:'未知'}, num:100, string:'周五晚上12点我们看恐怖片准备好小零食' }, }) /* v-for 绑定一个标签 循环一个数据源 {{key}}:{{value}}-{{index}} */ 用 vue实现tab选项卡 *{ padding: 0; margin: 0; } .box{ width: 400px; height: 600px; border: 1px solid red; } .nav { list-style: none; height: 80px; width: 400px; background: skyblue; font-size: 0px; } .nav li{ display: inline-block; height: 80px; width: 100px; border: 1px solid green; box-sizing: border-box; font-size: 16px; } .sel{ background: yellowgreen; } .content div{ width: 400px; height: 420px; background: pink; } {{item}} {{item}} let vm = new Vue({ el:"#app", data:{ list:['爱情','动作','恐怖','科幻'], seleted:'科幻' //默认选中的一项 }, methods: { change(item){ console.log('点到了:'+item) this.seleted = item } }, }) /* 用 vue实现tab选项卡 1. 渲染界面 2. 点击切换tab 3. 导航条高亮 4. 内容要切换 a. 先把静态处理出来 b. 哪些元素可以用指令 */ todolist 能添加代办事项 .green{ background: green; } .red{ background: red; } 添加 {{item.event}} del 已完成 待完成 let vm = new Vue({ el:"#app", data:{ list:[{event:'今晚代码到天明',state:false}, {event:'明晚代码到天明',state:true}, {event:'明晚恐怖片到天明',state:false}], inputValue:'呵呵哒' }, methods: { add(){ console.log(this.inputValue) // 将用户输入的信息添加到list数据里 页面会自动发生改变 this.list.push({event:this.inputValue,state:false}) }, del(index){ console.log('要删除的下标',index) // 数组里删除点击的数据 this.list.splice(index,1) }, finish(index){ // 将点击项的状态值改成true 就是完成 this.list[index].state=true } }, }) /* 能够添加代办实现 v 显示代待办事项 v 删除代办事项 v 完成代办事项 v 1.寻找数据和页面的关系 2.通过指令将数据和页面绑定 3.更改数据 页面会自动变化 */ 双向数据绑定原理 {{value}} let vm = new Vue({ el:"#app", data:{ value:'你好' }, methods: { input(e){ console.log(e.target.value) this.value=e.target.value } }, }) /* 在input 框输入的内容可以在p元素显示出来 */ 双向数据绑定实现 v-model {{hehe}} let vm = new Vue({ el:"#app", data:{ hehe:'你好' }, }) /* v-model 叫双向数据绑定 相当于 事件绑定和属性绑定的综合 可以绑定一个表单元素的value 修改表单元素的 data里的数据也会发生改变 v-model 所有的表单元素都能用 组件也可用 */ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |